<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

<p>pppppp</p>

<canvas id="myCanvass" width="200" height="100"></canvas>
<script type="text/javascript">
	var c=document.getElementById("myCanvass");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#FF0000";
	cxt.fillRect(0,0,150,75);	
</script>


<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">111</div>

<div id="xycoordinates" style="clear: both;">222</div>

<script type="text/javascript"> 
	function cnvs_getCoordinates(e)
	{
		x=e.clientX;
		y=e.clientY;
		document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
	}
	 
	function cnvs_clearCoordinates()
	{
		document.getElementById("xycoordinates").innerHTML="";
	}
</script>

</body>
</html>